<template>
	<view class="housekeeping">
		<view class="aa">
			<view class="top">
				<view class="lay">服务类型</view>
				<u-collapse>
					<u-collapse-item :title="item.head" v-for="(item, index) in itemList" :key="index">
						<view class="collapse-item" v-for="(item1,index) in item.text" :key="index">
							<view class="xiala">
								{{item1.con}}
							</view>
						</view>
					</u-collapse-item>
				</u-collapse>
			</view>
		</view>
		<view class="between">
			<view class="text">
				上传图片（选填：其他辅助证件如证书等）
			</view>
			<u-upload :action="action"></u-upload>
		</view>
		<view class="bottom">
			<view class="submit">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				action: '',
				itemList: [{
					head: "万能保姆",
					open: true,
					disabled: true,
					text: [{
						con: "万能保姆"
					}]
				}, {
					head: "面包机维修",
					open: false,
					text: [{
						con: "进口面包机"
					}, {
						con: "国产面包机"
					}]
				}, {
					head: "家庭保洁",
					open: false,
					text: [{
						con: "洗车"
					}, {
						con: "开荒保洁"
					}, {
						con: "日常保洁"
					}, {
						con: "钟点工"
					}]
				}, {
					head: "管道服务",
					open: false,
					text: [{
						con: "管道疏通"
					}, {
						con: "管道漏水"
					}, {
						con: "抽化粪池"
					}]
				}, {
					head: "做饭",
					open: false,
					text: [{
						con: "做饭"
					}]
				}, {
					head: "家庭维修",
					open: false,
					text: [{
						con: "电器维修"
					}]
				}],
			}
		},
		methods: {

		}
	}
</script>

<style scoped>
	.housekeeping {
		background: rgb(238, 238, 238);
		height: 1250rpx;
	}

	.aa {
		display: flex;
	}

	.top {
		width: 95%;
		height: 694rpx;
		background-color: #FFFFFF;
		margin: 3% auto;
		padding: 24rpx;
		border-radius: 6rpx;
	}

	.lay {
		font-size: 40rpx;
		font-weight: 600;
	}

	.xiala {
		border: 2rpx solid rgb(153, 153, 153);
		width: 170rpx;
		padding: 10rpx;
		border-radius: 10rpx;
		text-align: center;
	}

	.collapse-item {
		margin: 1% 3%;
	}

	.u-collapse-body {
		height: 170rpx !important;
	}

	/deep/.u-collapse-content {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap;
	}

	.between {
		width: 95%;
		height: 270rpx;
		background-color: #FFFFFF;
		margin: 3% auto;
		padding: 24rpx;
		border-radius: 6rpx;
	}

	.text {
		font-weight: 600;
		font-size: 30rpx;
	}
	
	/deep/u-list-item{
		    width: 180rpx;
		    height: 180rpx;
	}
	
	.bottom {
		margin: 0 auto;
		width: 94%;
		margin-top: 10%;
	}
	
	.submit {
		width: 100%;
		height: 80rpx;
		border-radius: 20px;
		margin-bottom: 5%;
		text-align: center;
		padding-top: 12px;
		background-image: linear-gradient(to right, rgb(53, 199, 233), rgb(30, 141, 255));
	}
</style>
